let nametext = document.querySelector("#name")
let submitbtn = document.querySelector("#submit-btn")

let school = document.querySelector("#school")
let company = document.querySelector("#company")
let schoolselect = document.querySelector("#school-select")
let companyselect = document.querySelector("#company-select")

let palette = document.querySelector(".palette")
let colorpicker = document.querySelector(".color-picker")

let fadeobj = document.querySelector("#fade-obj")
let fadebtn = document.querySelector("#fade-btn")

let spritesbd = document.querySelector(".sprites-bd")


submitbtn.addEventListener("click", function (e) {
    nametext.value = ""
})
nametext.addEventListener("keyup", function (e) {
    if (e.code == "Escape") {
        nametext.value = ""
        nametext.focus()
    }
})
nametext.addEventListener("keydown", function (e) {
    if (e.code == "Enter") {
        nametext.value = ""
        nametext.blur()
    }
})

school.addEventListener("change", function (e) {
    schoolselect.style.cssText = "display:inline"
    companyselect.style.cssText = "display:none"
})
company.addEventListener("click", function (e) {
    schoolselect.style.display = "none"
    companyselect.style.display = "inline"
})

palette.addEventListener("click", function (e) {
    let event = e || window.event
    let target = event.target || event.srcElement
    if (target.nodeName == "LI") {
        colorpicker.innerHTML = target.style.backgroundColor
        colorpicker.style.color = target.style.backgroundColor
    }
})

fadebtn.addEventListener("click", function (e) {
    this.disabled = true
    let that = this
    let target
    if (this.innerHTML == "淡出") {
        target = 0
    } else {
        target = 1
    }
    let timerId = setInterval(function () {
        let current = fadeobj.style.opacity || 1
        let step = current - target > 0 ? -0.01 : 0.01
        if (Math.abs(current - target) < Math.abs(step)) {
            fadeobj.style.opacity = target
            that.disabled = false
            if (target == 0) {
                that.innerHTML = "淡入"
            } else {
                that.innerHTML = "淡出"
            }
            clearInterval(timerId)
        } else {
            fadeobj.style.opacity = (current * 100 + step * 100) / 100
        }
        // console.log("target:" + target + "----" + "step:" + step + "----" + "current:" + current);
    }, 10)
})

let index = 0
let direction = true
setInterval(function () {
    let step = 480
    if (index == 16) {
        direction = false
    }
    if (index == 0) {
        direction = true
    }
    if (direction) {
        index++
        spritesbd.style.backgroundPositionY = - index * step -5 + "px"
    } else {
        index--
        spritesbd.style.backgroundPositionY = - index * step -5 + "px"
    }
    // console.log("index:" + index + "-----" + "direction:" + direction + "----" + "current:" + current)
}, 100)